import React,{ Component } from 'react';
import { Button,Input,List } from 'antd';
// 引入store
//import store from './store';

//引入actionCreaters
import { 
    CHANGE_INPUTVALUE_ACTION,
    ADD_TO_DATA_ACTION,
    DEL_TO_DATA_ACTION,
    ADD_TO_DATA_ACTION_THUNK
} from './store-react-redux/actionCreaters';


// 引入连接器函数，这时候会不需要store,将原先的store代码删除
import { connect } from 'react-redux';


class TodoListRR extends Component{
    // constructor(){
    //     super();
    //     // getState获取store中的状态
    //     //this.state = store.getState();
    //     // subscribe 订阅
    //     // 订阅store ，一旦store 状态数据有更新，会进行触发
    //     //store.subscribe(this.storeChange.bind(this));
    // }
    
    // store变化时，修改react state的函数
    // storeChange(){
    //     this.setState(store.getState());
    // }
    
    // 输入框变化
    // handleChange(e){
    //     // this.setState({
    //     //     inputVal: e.target.value
    //     // });
    //     // 触发reducer(store)修改数据
    //     // const action = {
    //     //     // type必传
    //     //     type: 'change_inputVal',
    //     //     value: e.target.value
    //     // };
    //     //dispatch 事件派发
    //     //store.dispatch(CHANGE_INPUTVALUE_ACTION(e.target.value));
    // }
    
    // 新增
    // handleClick(){
    //     // const action = {
    //     //     type: 'add_to_data'
    //     // }
    //     //store.dispatch(ADD_TO_DATA_ACTION());
    // }
    
    //双击删除
    // handleDoubleClick(index){
    //     // store.dispatch({
    //     //     type: 'del_to_data',
    //     //     value: index
    //     // })
    //     //store.dispatch(DEL_TO_DATA_ACTION(index));
    // }

    render(){
        return (
            <div style={{padding: '40px'}}>
                <Input 
                placeholder="请输入待办事项" 
                style={{ width: '350px',marginRight: '20px' }}
                value={this.props.inputVal}
                onChange={this.props.handleChange.bind(this)} 
                />
                <Button 
                type="primary" 
                onClick={this.props.handleClick.bind(this)}>
                    添加
                </Button>
                <List
                bordered
                style={{ marginTop: '30px',width: '435px',userSelect: 'none' }}
                dataSource={this.props.data}
                renderItem={(item,index) => (
                    <List.Item onDoubleClick={this.props.handleDoubleClick.bind(this,index)}>{item}</List.Item>
                )}
                />
            </div>
        )
    }
}
//状态映射
const mapStateToProps = (state) => {
    return {
        ...state
    }
}

// 事件派发映射
const mapDispatchToProps = (dispatch) => {
    return {
        // 新增
        handleClick(){
            // 未使用thunk
            // dispatch(ADD_TO_DATA_ACTION());

            // 使用thunk
            ADD_TO_DATA_ACTION_THUNK()(dispatch);
        },
        //双击删除
        handleDoubleClick(index){
            dispatch(DEL_TO_DATA_ACTION(index));
        },
        handleChange(e){
            dispatch(CHANGE_INPUTVALUE_ACTION(e.target.value));
        }
    }
}


//引入连接器后，不再是导出组件，而是导出connect(状态的映射,事件派发的映射)(组件名称)
export default connect(mapStateToProps,mapDispatchToProps)(TodoListRR);